import { defineComponent } from 'vue';
import { WrapTitle, VueChart } from '@common/index';

export default defineComponent({
  name: 'InnoStrategy',
  props: {
    data: String,
  },
  render(props) {
    return (
      <div id="InnoStrategy">
        <WrapTitle title="创新战略"></WrapTitle>

        {!props?.data?.avgPercentArr && !props?.data?.compPercentArr ? (
          <div class="card_null">
            <img src={require('@assets/img_null.png')} width={56} height={74} />
          </div>
        ) : (
          <VueChart
            height="420px"
            option={{
              title: {
                show: false,
              },
              legend: {
                left: 'right',
                textStyle: {
                  color: 'white',
                },
                data: ['公司评分', '行业平均'],
              },
              radar: {
                indicator: [
                  { name: '研发规模稳定性', max: 100 },
                  { name: '公司竞争力', max: 100 },
                  { name: '技术质量', max: 100 },
                  { name: '技术布局', max: 100 },
                  { name: '技术影响力', max: 100 },
                ],
                center: ['50%', '50%'],
                radius: 120,
                startAngle: 90,
                splitNumber: 5,
                shape: 'circle',
                splitArea: {
                  areaStyle: {
                    color: ['rgba(255, 255, 255, 0.1)'],
                    shadowColor: 'rgba(0, 0, 0, 0.2)',
                    shadowBlur: 10,
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: 'rgba(211, 253, 250, 0.2)',
                  },
                },
                splitLine: {
                  lineStyle: {
                    color: 'rgba(211, 253, 250, 0.2)',
                  },
                },
                name: {
                  textStyle: {
                    color: '#fff',
                    fontSize: 16,
                  },
                },
              },
              series: [
                {
                  type: 'radar',
                  label: {
                    show: true,
                    color: '#fff',
                    fontSize: '20px;',
                  },
                  data: [
                    {
                      value: props?.data?.compPercentArr,
                      name: '公司评分',
                      areaStyle: {
                        color: 'rgba(29, 245, 245, 0.3)',
                      },
                      lineStyle: {
                        color: '#1DF5F5',
                      },
                      itemStyle: {
                        color: '#1DF5F5',
                      },
                    },
                    {
                      value: props?.data?.avgPercentArr,
                      name: '行业平均',
                      areaStyle: {
                        color: 'rgba(24, 144, 255, 0.3)',
                      },
                      lineStyle: {
                        color: '#1890FF',
                      },
                      itemStyle: {
                        color: '#1890FF',
                      },
                    },
                  ],
                },
              ],
            }}
          />
        )}
      </div>
    );
  },
});
